<template>
  <div class="my">
    <div class="top" v-if="islogin">
      <div class="info">
        <div class="icon">
          <img :src="userList.photo" alt="" @click="toMyInfo" />
        </div>
        <div class="userinfo">
          <div class="username" @click="toMyInfo">
            {{ userList.name }}
          </div>
          <div class="apply">
            申请认证
          </div>
        </div>
        <div class="readTime">
          <div class="readIcon">
            <i class="iconfont icon-yuedu"></i>
          </div>
          <div class="read-right">
            <div class="read">
              今日阅读
            </div>
            <div class="time">
              5分钟
            </div>
          </div>
        </div>
      </div>
      <div class="userBottom">
        <div class="box">
          <div class="num">
            {{ userList.art_count }}
          </div>
          <div class="name">
            动态
          </div>
        </div>
        <div class="box">
          <div class="num">
            {{ userList.follow_count }}
          </div>
          <div class="name">
            关注
          </div>
        </div>
        <div class="box">
          <div class="num">
            {{ userList.fans_count }}
          </div>
          <div class="name">
            粉丝
          </div>
        </div>
      </div>
    </div>
    <div class="top2" v-else>
      <div class="phone" @click="tologin">
        <i class="iconfont icon-shouji"></i>
      </div>
    </div>
    <div class="nav">
      <div class="nav-item">
        <div class="icon">
          <i class="iconfont icon-shoucang_huaban1"></i>
        </div>
        <div class="itemBottom">
          收 藏
        </div>
      </div>
      <div class="nav-item">
        <div class="icon">
          <i class="iconfont icon-lishi"></i>
        </div>
        <div class="itemBottom">
          历 史
        </div>
      </div>
      <div class="nav-item" v-if="islogin">
        <div class="icon">
          <i class="iconfont icon-zuopin"></i>
        </div>
        <div class="itemBottom">
          作 品
        </div>
      </div>
    </div>
    <div class="content">
      <ul class="contentItem">
        <li>
          <div class="left">消息通知</div>
          <div class="right">
            <i class="iconfont icon-xiangyou"></i>
          </div>
        </li>
        <li>
          <div class="left">实名认证</div>
          <div class="right">
            <i class="iconfont icon-xiangyou"></i>
          </div>
        </li>
      </ul>
    </div>
    <div class="content">
      <ul class="contentItem">
        <li>
          <div class="left">用户反馈</div>
          <div class="right">
            <i class="iconfont icon-xiangyou"></i>
          </div>
        </li>
        <li>
          <div class="left">小智同学</div>
          <div class="right">
            <i class="iconfont icon-xiangyou"></i>
          </div>
        </li>
        <li>
          <div class="left">系统设置</div>
          <div class="right">
            <i class="iconfont icon-xiangyou"></i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { my } from '../../api/my'
import { getlocal } from '../../utils/local'
export default {
  name: 'my',
  data () {
    return {
      userList: {},
      islogin: false
    }
  },
  mounted () {
    this.getInfo()
    this.login()
  },
  methods: {
    async getInfo () {
      const res = await my()
      // console.log(res)
      this.userList = res.data.data
      this.$store.commit('setUserInfo', this.userList)
    },
    login () {
      if (getlocal('token')) {
        this.islogin = true
      }
    },
    toMyInfo () {
      this.$router.push('/home/myinfo')
    },
    tologin () {
      this.$router.push('/')
    }
  }
}
</script>
<style lang="less" scoped>
.my {
  background-color: #f5f7f9;
  .top {
    // height: 150px;
    // background-color: #429efa;

    background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=277454647,23201703&fm=26&gp=0.jpg');
    background-size: 100%;
    padding: 30px 0 15px 20px;
    .info {
      display: flex;
      justify-content: space-between;
      .icon {
        height: 65px;
        width: 65px;
        border: 2px solid #fff;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .userinfo {
        flex: 1;
        color: #fff;
        height: 65px;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .apply {
          width: 70px;
          font-size: 14px;
          color: #3296fa;
          background-color: #fff;
          border-radius: 12px;
          text-align: center;
        }
      }
      .readTime {
        margin-top: 8px;
        width: 100px;
        height: 50px;
        background-color: #000;
        opacity: 0.5;
        padding-left: 10px;
        border-radius: 25px 0 0 25px;
        display: flex;
        .readIcon {
          margin-left: 7px;
          line-height: 50px;
          margin-right: 5px;
          .icon-yuedu {
            color: #fff;
            font-size: 28px;
          }
        }
        .read-right {
          margin-top: 8px;
          font-size: 12px;
          color: #fff;
          .read {
            margin-bottom: 3px;
          }
        }
      }
    }
    .userBottom {
      padding-right: 20px;
      display: flex;
      justify-content: space-around;
      text-align: center;
      .box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        color: #fff;
        margin-top: 25px;
        .num {
          font-size: 22px;
          margin-bottom: 10px;
        }
        .name {
          font-size: 16px;
        }
      }
    }
  }
  .top2 {
    height: 188px;
    background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=277454647,23201703&fm=26&gp=0.jpg');
    background-size: 100%;
    padding: 30px 0 15px 20px;
    position: relative;
    .phone {
      background-color: #fff;
      width: 75px;
      height: 75px;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .icon-shouji {
        font-size: 40px;
        color: #2589ff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .nav {
    display: flex;
    background-color: #fff;
    justify-content: space-around;
    text-align: center;
    margin-bottom: 5px;
    padding: 10px 0;
    .nav-item {
      padding: 0 40px;
      flex: 1;
      border-right: 1px solid #edeff3;
      .icon-shoucang_huaban1 {
        color: #eb5253;
      }
      .icon-lishi {
        color: #ffc271;
      }
      .icon-zuopin {
        color: #678eff;
      }
      .icon {
        margin-bottom: 7px;
        i {
          font-size: 30px;
        }
      }
      .itemBottom {
        font-size: 16px;
      }
      &:last-child {
        border-right: 0;
      }
    }
  }
  .content {
    background-color: #fff;
    .contentItem {
      padding: 0 15px 0 25px;
      margin-bottom: 5px;
      li {
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #edeff3;
        .left {
          font-size: 16px;
        }
        &:last-child {
          border-bottom: 0;
        }
      }
    }
  }
}
</style>
